<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Strands of Fate Character Builder</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <link rel="stylesheet" href="css/style.css" media="screen">

    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    <script src="js/jquery.tmpl.js" type="text/javascript"></script>
    <script src="js/knockout-1.2.1.js" type="text/javascript"></script>
    <script src="js/knockout.mapping-10182011.js" type="text/javascript"></script>
    <script src="js/defaultsAndData.js" type="text/javascript"></script>

    <script>
      $(document).ready(function() {
        var viewModel = {
          campaign: {
            gm: ko.observable("test"),
            title: ko.observable(""),
            desc: ko.observable(""),
            pl: ko.observable(""),
            tl: ko.observable(1),
            useTransMorph: ko.observable(false)
          },
          character: {

          },
          aspects: {

          },
          abilities: {

          },
          advantages: {

          },
          equipment: {

          },
          stress: {

          },
          exp: {

          }
        };

        viewModel.campaign.refresh = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plRefresh");
        });
        viewModel.campaign.tradeRefForAP = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plTradeFor");
        });
        viewModel.campaign.tradeAmount = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plTradeAmt");
        });
        viewModel.campaign.abiP = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plAbiP");
        });
        viewModel.campaign.abiPCap = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plAbiPCap");
        });
        viewModel.campaign.advP = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plAdvP");
        });
        viewModel.campaign.advPCap = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plAdvPCap");
        });
        viewModel.campaign.highAdvType = ko.dependentObservable(function(){
          return getPLVal(viewModel.campaign.pl, "plHighAdvType");
        });

        viewModel.campaign.enableTradeAmount = ko.dependentObservable(function(){
          return (viewModel.campaign.tradeRefForAP() == true);
        });
        viewModel.campaign.showUseTransMorph = ko.dependentObservable(function(){
          return (viewModel.campaign.tl() >= 5);
        });

        ko.applyBindings(viewModel);
      });



    </script>
  </head>
  <body class="claro">
    <div class="main">
      <div class="head">
        <span class="headerText">Strands of Fate CharBuilder</span>
        <span class="headRight">
            <button class="btnHeadSave" id="btnHeadSave" type="button" onclick="alert(JSON.stringify(ko.mapping.toJS(viewModel)));">
              Save
            </button>
            <button class="btnHeadLoad" id="btnHeadLoad" type="button">
              Load
            </button>
        </span>
      </div>
      <div class="accCon" id="accCon">
        <div title="Campaign">
          <div class="row">
            <span class="lblCamGM" id="lblCamGM" >Campaign GM:</span>
            <input data-bind="value: campaign.gm" type="text" class="txtCamGM" id="txtCamGM">
          </div>
          <div class="row">
            <span class="lblCamTitle" id="lblCamTitle" >Campaign Title:</span>
            <input type="text" class="txtCamTitle" id="txtCamTitle">
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblCamDesc" id="lblCamDesc" >Campaign Description:</legend>
              <textarea class="txtCamDesc" id="txtCamDesc"></textarea>
            </fieldset>
          </div>
          <div class="row">
            <span class="lblCamPL" id="lblCamPL">Power Level:</span>
            <select class="cmboCamPL" id="cmboCamPL">
              <option></option>
              <option>Commoner</option>
              <option>Expert</option>
              <option>Hero</option>
              <option>Action Hero</option>
              <option>Mythic Hero</option>
              <option>Legendary Hero</option>
              <option>Super Hero, Metro Class</option>
              <option>Super Hero, World Class</option>
              <option>Super Hero, Galaxy Class</option>
              <option>Super Hero, Cosmic Class</option>
              <option>Super Hero, Infinity Class</option>
            </select>
          </div>
          <div class="row">
            <span class="lblCamRefresh" id="lblCamRefresh" >Refresh:</span>
            <input class="txtCamRefresh" id="txtCamRefresh" type="text">
            <input class="chkCamRefreshTrade" id="chkCamRefreshTrade">
            <label class="lblCamRefreshTrade" id="lblCamRefreshTrade" for="chkCamRefreshTrade">Trade Refresh for Advantage Pts:</label>
            <input class="txtCamRefreshTrade" id="txtCamRefreshTrade" type="text">
          </div>
          <div class="row">
            <span class="lblCamAbiTot" id="lblCamAbiTot" >Ability Pts:</span>
            <input class="txtCamAbiTot" id="txtCamAbiTot" type="text">
            <span class="lblCamAbiCap" id="lblCamAbiCap" >Cap:</span>
            <input class="txtCamAbiCap" id="txtCamAbiCap" type="text">
            <span class="lblCamAdvTot" id="lblCamAdvTot" >Advantage Pts:</span>
            <input class="txtCamAdvTot" id="txtCamAdvTot" type="text">
            <span class="lblCamAdvCap" id="lblCamAdvCap">Cap:</span>
            <input class="txtCamAdvCap" id="txtCamAdvCap" type="text">
          </div>
          <div class="row">
            <span class="lblCamAdvHigh" id="lblCamAdvHigh">Highest Advantage Type:</span>
            <select class="cmboCamAdvHigh" id="cmboCamAdvHigh">
              <option></option>
              <option>Expert</option>
              <option>Heroic</option>
              <option>Power</option>
              <option>Super Power, Metro Class</option>
              <option>Super Power, World Class</option>
              <option>Super Power, Galaxy Class</option>
              <option>Super Power, Cosmic Class</option>
              <option>Super Power, Infinity Class</option>
            </select>
          </div>
          <div class="row">
            <span class="lblCamTL" id="lblCamTL">Tech Level:</span>
            <select class="cmboCamTL" id="cmboCamTL">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
            </select>
            <input class="chkCamUseTransMorph" id="chkCamUseTransMorph">
            <label class="lblCamUseTransMorph" id="lblCamUseTransMorph" for="chkCamUseTransMorph">Use Transhuman Morph Rules</label>
          </div>
        </div>
        <div title="Character">
          <div class="row">
            <span class="lblCharPlayer" id="lblCharPlayer" >Player Name:</span>
            <input type="text" class="txtCharPlayer" id="txtCharPlayer">
          </div>
          <div class="row">
            <span class="lblCharName" id="lblCharName">Character Name:</span>
            <input type="text" class="txtCharName" id="txtCharName">
          </div>
          <div class="row">
            <span class="lblCharConcept" id="lblCharConcept" >Concept:</span>
            <input type="text" class="txtCharConcept" id="txtCharConcept">
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblCharDesc" id="lblCharDesc" >Character Description:</legend>
              <textarea class="txtCharDesc" id="txtCharDesc"></textarea>
            </fieldset>
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblCharHist" id="lblCharHist" >Character History:</legend>
              <textarea class="txtCharHist" id="txtCharHist"></textarea>
            </fieldset>
          </div>
        </div>
        <div title="Aspects">
          <div class="row">
            <fieldset class="selectField">
              <legend class="lblAspectCurrent" id="lblAspectCurrent">Current Aspect:</legend>
              <select class="mltAspectCurrent" id="mltAspectCurrent" size="5" multiple="false">
                <option></option>
              </select>
            </fieldset>
          </div>
          <div class="row">
            <span class="lblAspectName" id="lblAspectName" >Aspect Name:</span>
            <input type="text" class="txtAspectName" id="txtAspectName">
          </div>
          <div class="row">
            <span class="lblAspectType" id="lblAspectType">Aspect Type:</span>
            <input type="text" class="txtAspectType" id="txtAspectType">
          </div>
          <div class="row">
            <span class="lblAspectSpecAbi" id="lblAspectSpecAbi">Specialty Ability:</span>
            <select class="cmboAspectSpecAbi" id="cmboAspectSpecAbi">
              <option></option>
              <option>Agility</option>
              <option>Endurance</option>
              <option>Perception</option>
              <option>Strength</option>
              <option>Craft</option>
              <option>Knowledge</option>
              <option>Reasoning</option>
              <option>Willpower</option>
              <option>Deception</option>
              <option>Empathy</option>
              <option>Persuasion</option>
              <option>Resources</option>
            </select>
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblAspectInvoke" id="lblAspectInvoke" >Aspect Invoke Notes:</legend>
              <textarea class="txtAspectInvoke" id="txtAspectInvoke"></textarea>
            </fieldset>
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblAspectCompel" id="lblAspectCompel" >Aspect Compel Notes:</legend>
              <textarea class="txtAspectCompel" id="txtAspectCompel"></textarea>
            </fieldset>
          </div>
          <div class="row">
            <button class="btnAspectAdd" id="btnAspectAdd" type="button">
              Add
            </button>
            <button class="btnAspectRem" id="btnAspectRem" type="button">
              Remove
            </button>
          </div>
        </div>
        <div title="Abilities">
          <div class="leftAbility" style="width:40%;">
            <fieldset class="abiLeftField">
              <legend>Physical Abilities</legend>
              <div class="abirow">
                <span class="lblAbiAgi" id="lblAbiAgi" >Agility:</span>
                <input type="text" class="txtAbiAgi" id="txtAbiAgi">
              </div>
              <div class="abirow">
                <span class="lblAbiEnd" id="lblAbiEnd" >Endurance:</span>
                <input type="text" class="txtAbiEnd" id="txtAbiEnd">
              </div>
              <div class="abirow">
                <span class="lblAbiPerc" id="lblAbiPerc" >Perception:</span>
                <input type="text" class="txtAbiPerc" id="txtAbiPerc">
              </div>
              <div class="abirow">
                <span class="lblAbiStr" id="lblAbiStr" >Strength:</span>
                <input type="text" class="txtAbiStr" id="txtAbiStr">
              </div>
            </fieldset>
            <fieldset class="abiLeftField">
              <legend>Mental Abilities</legend>
              <div class="abirow">
                <span class="lblAbiCra" id="lblAbiCra" >Craft:</span>
                <input type="text" class="txtAbiCra" id="txtAbiCra">
              </div>
              <div class="abirow">
                <span class="lblAbiKno" id="lblAbiKno" >Knowledge:</span>
                <input type="text" class="txtAbiKno" id="txtAbiKno">
              </div>
              <div class="abirow">
                <span class="lblAbiRea" id="lblAbiRea" >Reasoning:</span>
                <input type="text" class="txtAbiRea" id="txtAbiRea">
              </div>
              <div class="abirow">
                <span class="lblAbiWil" id="lblAbiWil" >Willpower:</span>
                <input type="text" class="txtAbiWil" id="txtAbiWil">
              </div>
            </fieldset>
            <fieldset class="abiLeftField">
              <legend>Social Abilities</legend>
              <div class="abirow">
                <span class="lblAbiDec" id="lblAbiDec" >Deception:</span>
                <input type="text" class="txtAbiDec" id="txtAbiDec">
              </div>
              <div class="abirow">
                <span class="lblAbiEmp" id="lblAbiEmp" >Empathy:</span>
                <input type="text" class="txtAbiEmp" id="txtAbiEmp">
              </div>
              <div class="abirow">
                <span class="lblAbiPers" id="lblAbiPers" >Persuasion:</span>
                <input type="text" class="txtAbiPers" id="txtAbiPers">
              </div>
              <div class="abirow">
                <span class="lblAbiRes" id="lblAbiRes" >Resources:</span>
                <input type="text" class="txtAbiRes" id="txtAbiRes">
              </div>
            </fieldset>
          </div>
          <div class="rightAbility">
            <fieldset class="abiRightField">
              <div class="abirow">
                <span style="width:80px;">Abilities Set:</span><span>0</span><span>/</span><span>24</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">5's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Phys:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">4's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Mental:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">3's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Social:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">2's Set:</span><span style="width:30px;">0</span><span style="width:40px;">Affinity:</span><span style="padding-left: 10px;">0</span>
              </div>
              <div class="abirow">
                <span style="width:50px;">1's Set:</span><span>0</span>
              </div>
            </fieldset>
            <fieldset class="abiRightField">
              <legend>Affinities</legend>
              <div>
                <input type="text" class="txtAbiAffin1" id="txtAbiAffin1">
                <input type="text" class="txtNumAbiAffin1" id="txtNumAbiAffin1">
              </div>
              <div class="abirow">
                <input type="text" class="txtAbiAffin2" id="txtAbiAffin2">
                <input type="text" class="txtNumAbiAffin2" id="txtNumAbiAffin2">
              </div>
              <div class="abirow">
                <input type="text" class="txtAbiAffin3" id="txtAbiAffin3">
                <input type="text" class="txtNumAbiAffin3" id="txtNumAbiAffin3">
              </div>
              <div class="abirow">
                <input type="text" class="txtAbiAffin4" id="txtAbiAffin4">
                <input type="text" class="txtNumAbiAffin4" id="txtNumAbiAffin4">
              </div>
              <div class="abirow">
                <input type="text" class="txtAbiAffin5" id="txtAbiAffin5">
                <input type="text" class="txtNumAbiAffin5" id="txtNumAbiAffin5">
              </div>
            </fieldset>
            <fieldset class="abiRightField">
              <legend>Alternate Forms</legend>
              <div>
                <select class="cmboAbiAltForm" id="cmboAbiAltForm">
                  <option>Base</option>
                </select>
              </div>
              <div class="abirow">
                <button class="btnAbiAltFormAdd" id="btnAbiAltFormAdd" type="button">
                  Add
                </button>
                <button class="btnAbiAltFormEdit" id="btnAbiAltFormEdit" type="button">
                  Edit
                </button>
                <button class="btnAbiAltFormRem" id="btnAbiAltFormRem" type="button">
                  Rem
                </button>
              </div>
            </fieldset>
          </div>
        </div>
        <div title="Advantages">
          <div class="row">
            <fieldset class="selectField">
              <legend class="lblAdvCurrent" id="lblAdvCurrent">Current Advantage:</legend>
              <select class="mltAdvCurrent" id="mltAdvCurrent" size="5" multiple="false">
                <option></option>
              </select>
            </fieldset>
          </div>
          <div class="row">
            <span class="lblAdvName" id="lblAdvName" >Advantage Name:</span>
            <input type="text" class="txtAdvName" id="txtAdvName">
            <span class="lblAdvCost" id="lblAdvCost" >Cost:</span>
            <input class="txtAdvCost" id="txtAdvCost" type="text">
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblAdvDesc" id="lblAdvDesc" >Advantage Description:</legend>
              <textarea class="txtAdvDesc" id="txtAdvDesc"></textarea>
            </fieldset>
          </div>
          <div class="row">
            <button class="btnAdvAddList" id="btnAdvAddList" type="button">
              Add From List
            </button>
            <button class="btnAdvAdd" id="btnAdvAdd" type="button">
              Add
            </button>
            <button class="btnAdvRem" id="btnAdvRem" type="button">
              Remove
            </button>
          </div>
        </div>
        <div title="Equipment">
          <div class="row">
            <fieldset class="selectField">
              <legend class="lblEqCurrent" id="lblEqCurrent">Current Equipment:</legend>
              <select class="mltEqCurrent" id="mltEqCurrent" size="5" multiple="false">
                <option></option>
              </select>
            </fieldset>
          </div>
          <div class="row">
            <span class="lblEqName" id="lblEqName" >Equipment Name:</span>
            <input type="text" class="txtEqName" id="txtEqName">
            <span class="lblEqCost" id="lblEqCost" >Cost:</span>
            <input class="txtEqCost" id="txtEqCost" type="text">
          </div>
          <div class="row">
            <fieldset class="txtAreaField">
              <legend class="lblEqDesc" id="lblEqDesc" >Equipment Description:</legend>
              <textarea class="txtEqDesc" id="txtEqDesc"></textarea>
            </fieldset>
          </div>
          <div class="row">
            <button class="btnEqAddMorph" id="btnEqAddMorph" type="button">
              Add Morph
            </button>
            <button class="btnEqAddList" id="btnEqAddList" type="button">
              Add From List
            </button>
            <button class="btnEqAdd" id="btnEqAdd" type="button">
              Add
            </button>
            <button class="btnEqRem" id="btnEqRem" type="button">
              Remove
            </button>
          </div>
        </div>
        <div title="Stress">
          Lorem ipsum and all around - last...
        </div>
        <div title="Exp">
          Lorem ipsum and all around - last...
        </div>
      </div>
    </div>


  </body>
</html>
